<template>
  <ElCard header="进度条组件">
    <Progress />
    <Slider v-model="value" />
    <ElButton @click="openMessage">打开</ElButton>
  </ElCard>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { useMessageBox } from '@/hooks'

const value = ref('')

const openMessage = () => {
  useMessageBox(
    { tip: '提示', message: '确认删除该数据?', type: 'warning' },
    () => {
      console.log('确认')
    },
    () => {
      console.log('取消')
    }
  )
}

interface AnimateType {
  name?: string
  age?: number
}

class Animate {
  config: AnimateType
  static baseStaticField = '基类静态字段'
  constructor(config: AnimateType) {
    this.config = config
  }

  get getAnimateConfig() {
    return this.caleConfig()
  }

  caleConfig() {
    return this.config
  }

  setAnitmateConfig(value: any) {
    Object.assign(this.config, value)
  }

  speak() {
    console.log(this.config.name + '叫了几声')
  }

  static checkValue() {
    console.log('静态私有方法')
  }
}
class Dog extends Animate {
  constructor(config: AnimateType) {
    super(config)
  }
}

const dog = new Dog({ name: '小狗' })
dog.speak()

const animate = new Animate({ name: '小猫' })
animate.setAnitmateConfig({ age: 6 })
console.log(animate.getAnimateConfig)
console.log(Object.hasOwn(Animate, 'baseStaticField'))
console.log(Animate.baseStaticField)
console.log(Dog.baseStaticField)
</script>

<style scoped></style>
